<div class="container mt-2 rounded-2">
  <div class="row m-2">
    <div class="justify-content-center cabinet-title" >
      <h1>Добро пожаловать уважаемый {{ user.firstName }} {{ user.lastName }}</h1>
      {{user.roleUser}}
    </div>
  </div>
  <div *ngIf="user.roleUser==='NEW_USER'" [formGroup]="userData">
    <p class="text">Вы только что зарегистрировались в системе, необходимо получить ваши данные</p>
        <div class="row">
          <div class="col-md-6">
            <div class="row">
              <div class="col">
                <mat-form-field class="full-width">
                  <mat-label>Фамилия</mat-label>
                  <input matInput type="text" formControlName="lastName">
                  <mat-icon matSuffix>person</mat-icon>
                </mat-form-field>
              </div>
              <div class="col">
                <mat-form-field class="full-width">
                  <mat-label>Имя</mat-label>
                  <input matInput type="text"  formControlName="firstName" >
                  <mat-icon matSuffix>person</mat-icon>
                </mat-form-field>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <mat-form-field class="full-width">
                  <mat-label>Отчество</mat-label>
                  <input matInput type="text" formControlName="middleName" >
                  <mat-icon matSuffix>person</mat-icon>
                </mat-form-field>
              </div>
              <div class="col">
                <mat-form-field class="full-width">
                  <mat-label>Телефон</mat-label>
                  <span matTextPrefix>+7 &nbsp;</span>
                  <input type="tel" matInput mask="(000) 000-00-00" placeholder="(999) 123-45-67"
                  formControlName="phone">
                  <mat-icon matSuffix>call</mat-icon>
                </mat-form-field>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <mat-form-field class="full-width">
                  <mat-label>Ваша электронная почта</mat-label>
                  <input matInput formControlName="email">
                  <mat-icon matSuffix>mail</mat-icon>
                </mat-form-field>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <mat-form-field class="full-width">
                  <mat-label>Кем вы являетесь</mat-label>
                  <mat-select [(ngModel)]="selectedType" (selectionChange)="getSelectedValue()" [ngModelOptions]="{standalone: true}" >
                    @for (type of userType; track type) {
                      <mat-option value="{{type.value}}" >{{ type.valueView }}</mat-option>
                    }
                  </mat-select>
                </mat-form-field>
              </div>
            </div>
            <div class="row">
              <div *ngIf="selectedType==='LAWYER'" class="col">
                <mat-form-field class="full-width">
                  <mat-label>Реестровый номер адвоката</mat-label>
                  <input matInput  formControlName="lawyerRegistrationNumber">
                  <mat-icon matSuffix>app_registration</mat-icon>
                </mat-form-field>
                <h2 class="justify-content-center cabinet-title">Ваши специализации</h2>
                <div *ngFor="let spec of lawyerSpecifications">
                  <mat-checkbox class="example-margin"  [(ngModel)]="spec.selected"  [ngModelOptions]="{standalone: true}">
                   <span class="cabinet-title"> {{spec.title}} </span>
                  </mat-checkbox>
                </div>
              </div>
            </div>
            <div class="row">
              <div *ngIf="selectedType==='psychologist'" class="col">
                <mat-form-field class="full-width">
                  <mat-label>Сведения об образовании</mat-label>
                  <input matInput  formControlName="lawyerRegistrationNumber">
                  <mat-icon matSuffix>app_registration</mat-icon>
                </mat-form-field>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <input class="d-none" type="file" accept=".tiff,.jpg,.jpeg,.png" #inputPic (change)="onFileUpload($event)">
                <button mat-stroked-button class="pic-button" color="accent"  (click)="triggerPic()">
                  Загрузите фото
                  <mat-icon>photo_camera</mat-icon>
                </button>
              </div>
            </div>
          </div>
<!--          <div class="col-md-6">-->
            <div class="col" *ngIf="imagePreview">
              <mat-card class="cabinet-card">
                <mat-card-header>
                  <div mat-card-avatar class="example-header-image"></div>
                  <mat-card-title>{{selectedValue}} {{ user.firstName  }}  {{ user.middleName  }}  {{ user.lastName  }}</mat-card-title>
                </mat-card-header>
                <img mat-card-image [src]="imagePreview" *ngIf="imagePreview"  alt="Photo of a Lawyer">
<!--                <mat-card-content>-->
<!--                  <p>-->

<!--                  </p>-->
<!--                </mat-card-content>-->
<!--                <mat-card-actions>-->
<!--                  <button mat-button>LIKE</button>-->
<!--                  <button mat-button>SHARE</button>-->
<!--                </mat-card-actions>-->
              </mat-card>

            </div>
<!--            <div class="col justify-content-center">-->
<!--              <img class="img-preview rounded-2" [src]="imagePreview" *ngIf="imagePreview" alt="pic">-->
<!--            </div>-->
<!--            <div class="col">-->
<!--              Проверить данные-->
<!--            </div>-->
<!--            <div class="col">-->
<!--              <img class="img-preview rounded-2" [src]="imagePreview" *ngIf="imagePreview" alt="pic">-->

<!--            </div>-->
<!--          </div>-->

        </div>
<!--        <div class="row">-->
<!--          <div class="col">-->

<!--            <div class="example-form">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
  </div>


        <button class="mt-5" mat-raised-button color="primary"
                [disabled]="!userData.valid"
                (click)="sendUserData()"
        >Login</button>






</div>



